<!-- 出库和入库 -->
<template>
  <div class="border border-solid border-black p-[10px] pb-[0] my-[20px]">
    <div class="flex">
      <div>{{ title }}</div>
      <BasicUploadImage :params="params" :fileLists="fileList" @handle-change="handleChange" />
    </div>

    <Form
      class="flex flex-wrap"
      ref="formRef"
      :label-col="{ style: { width: '80px' } }"
      :model="formState"
      :rules="rules"
    >
      <FormItem
        v-if="formState.shippingType == 8"
        class="w-[33%]"
        label="快递单号"
        name="expressNo"
      >
        <Input class="w-[100%]" v-model:value="formState.expressNo" />
      </FormItem>
    </Form>
  </div>
  <div class="p-[10px] bg-[#99f599]">
    <p class="mb-[20px]">审核提示:</p>
    <div class="ml-[10px]">
      <p class="mb-[20px]">1.司机务必现场拍照(出库单、出仓单)上传附件</p>
      <p class="mb-[20px]">2.上传单据必须要有仓管和司机两人的签名</p>
      <p class="mb-[20px]">3.单据上必须备注货物牌号、数量、签收出库量、是否破损及额外收费等情况</p>
      <p class="mb-[20px]"
        >签收提示:出库签收后，除不可抗力及不可归咎于承运人责任外，货物破损、灭失、损毁等风险由承运司机及承运物流公司承担;如承运司机、仓管存在弄思作假等情况导致货物出现破损、灭失、损毁，我司将追究承运司机及仓库的赔偿责任</p
      >
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, defineEmits } from 'vue';
  import { Form, FormItem, Input, message } from 'ant-design-vue';
  import type { Rule } from 'ant-design-vue/es/form';
  import BasicUploadImage from '@/components/UploadImage/BasicUploadImage.vue';
  import { postOutBound, postInBound } from '@/api/waybillManagement/index';

  import { getUserFiles } from '@/api/common';

  const emit = defineEmits(['onSuccess', 'onFailed']);

  const formRef = ref();

  const title = ref('');

  const params = ref({
    configCode: 'eslogis_order',
    label: 'outbound',
    batchId: '',
  });
  const fileList = ref([]);

  const formState = ref({
    shippingOrderId: 0,
    fileLabel: '',
    shippingType: '',
    expressNo: '',
  });

  const rules: Record<string, Rule[]> = {
    expressNo: [{ required: true, message: '请输入快递单号', trigger: 'blur', type: 'string' }],
  };

  const initFormState = async (queryParams) => {
    console.log('🚀 ~ initFormState ~ queryParams:', queryParams);
    params.value.batchId = queryParams.batchId;
    params.value.label = queryParams.fileLabel;
    title.value = queryParams.fileLabel === 'outbound' ? '出库单证上传：' : '入库单证上传：';
    formState.value = {
      shippingOrderId: queryParams.shippingOrderId,
      fileLabel: queryParams.fileLabel,
      shippingType: queryParams.shippingType,
      expressNo: queryParams.expressNo,
    };

    const res = await getUserFiles(params.value);
    fileList.value = res;
  };

  const handleChange = async (data: any) => {
    fileList.value = data;
  };

  const Commit = async () => {
    if (fileList.value.length === 0 && formState.value.fileLabel === 'outbound') {
      message.error('请上传出库单证');
      emit('onFailed');
      return;
    }
    try {
      if (formState.value.fileLabel === 'outbound') {
        if (formState.value.shippingType == 8) {
          formRef.value
            .validate()
            .then(async () => {
              await postOutBound({
                ...formState.value,
              });
              message.success('处理成功');
              emit('onSuccess');
            })
            .catch((error) => {
              console.log('error', error);
              emit('onFailed');
            });
        } else {
          await postOutBound({
            ...formState.value,
          });
          message.success('处理成功');
          emit('onSuccess');
        }
      } else {
        await postInBound({
          ...formState.value,
        });
        message.success('处理成功');
        emit('onSuccess');
      }
    } catch (error) {
      emit('onFailed');
      message.error(error.message);
    }
  };

  defineExpose({
    initFormState,
    Commit,
  });
</script>
